<template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="姓名" width="180" prop="name"/>
      <el-table-column label="性别" width="180" prop="sex"/>
      <el-table-column label="年龄" width="180" prop="age"/>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">
            编辑
          </el-button>
          <!-- 删除 -->
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="是否删除?"
            @confirm="handleDelete(scope.row.id)"
            @cancel="cancel"
          >
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[4,6,8]"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </template>
  
  <script lang="ts" setup>
  import { ref } from "vue"
  import { onMounted } from "vue";
  import {page,remove} from '../api/index'
  import { InfoFilled} from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'
  import router from "../router/index"


  interface Person {
    id:number
    name: string
    sex: string
    age: number
  }
  //---------数据源-------------------
  const tableData = ref([])
  
  const handleEdit = (row: Person) => {
    
    router.push({
      path: '/personSave', 
      state:{
        params:JSON.stringify(row)
      }
    })
  }


  function cancel() {
    ElMessage({
      message:' 已取消',
      type: 'success',      
    })
  }

  const handleDelete = async(id:number) => {
    await remove(id)
    ElMessage({
      message:' 删除成功',
      type: 'success',      
    })
    showPage()
  }
  
  //分页
    const currentPage = ref(1)
    const pageSize = ref(4)
    const total = ref(0)
    const background = ref(false)
    const disabled = ref(false)

    const handleSizeChange = (val: number) => {
        pageSize.value = val
        showPage()
    }
    const handleCurrentChange = (val: number) => {
        currentPage.value = val
        showPage()
    }
  
  //分页的方法
  const showPage=async()=>{
    const res = await page(currentPage.value, pageSize.value)
    tableData.value = res.data.data.list
    total.value = res.data.data.total
  }

  onMounted(() => {
    showPage()
  })
  </script>